

        <!-- help-data -->


    
    <div class="detailHandle"><div class="detailCollapsed"></div><a name='animation'><code class="symbol">animation</code></a>: <span class="type">Object</span></div><div class="detailBody"><div class="desc">A collection of <b>Animation</b> objects, used to change default animations. A value of false will disable all animations in the widget.
<p>Available animations for the <b>Menu</b> are listed below.  Each animation has a reverse options which is used for the <b>close</b> effect by default, but can be over-ridden
by setting the <b>close</b> animation.  Each animation also has a direction which can be set off the animation (i.e. <b>slideIn:Down</b>).</p>
<div class="details-list">
<dl>
    <dt><b>slideIn</b></dt>
    <dd>Menu content slides in from the top</dd>
    <dt><b>fadeIn</b></dt>
    <dd>Menu content fades in</dd>
    <dt><b>expand</b></dt>
    <dd>Menu content expands from the top down. Similar to slideIn.</dd>
</dl>
</div></div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
     animation: { open: { effects: "fadeIn" } }
 });</code></pre></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='close'><code class="symbol">close</code></a>: <span class="type">Animation</span></div><div class="detailBody"><div class="desc">The animation that will be used when closing sub menus.</div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='open'><code class="symbol">open</code></a>: <span class="type">Animation</span></div><div class="detailBody"><div class="desc">The animation that will be used when opening sub menus.</div></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='closeOnClick'><code class="symbol">closeOnClick</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: true)</span></div><div class="detailBody"><div class="desc"> Specifies that sub menus should close after item selection (provided they won't navigate).</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
     closeOnClick: false
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='direction'><code class="symbol">direction</code></a>: <span class="type">String</span><span class="defaultValue">(default: "default")</span></div><div class="detailBody"><div class="desc"> Specifies Menu opening direction. Can be "top", "bottom", "left", "right".
You can also specify different direction for root and sub menu items, separating them with space. The example below will initialize the root menu to open upwards and
its sub menus to the left.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
    direction: "top left"
});</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='hoverDelay'><code class="symbol">hoverDelay</code></a>: <span class="type">Number</span><span class="defaultValue">(default: 100)</span></div><div class="detailBody"><div class="desc"> Specifies the delay in ms before the menu is opened/closed - used to avoid accidental closure on leaving.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
     hoverDelay: 200
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='openOnClick'><code class="symbol">openOnClick</code></a>: <span class="type">Boolean</span><span class="defaultValue">(default: false)</span></div><div class="detailBody"><div class="desc"> Specifies that the root sub menus will be opened on item click.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
     openOnClick: true
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='orientation'><code class="symbol">orientation</code></a>: <span class="type">String</span><span class="defaultValue">(default: "horizontal")</span></div><div class="detailBody"><div class="desc"> Root menu orientation. Could be horizontal or vertical.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
     orientation: "vertical"
 });</code></pre></div></div><div class="detailHandle"><div class="detailCollapsed"></div><a name='popupCollision'><code class="symbol">popupCollision</code></a>: <span class="type">String</span><span class="defaultValue">(default: > Specifies how Menu should adjust to screen boundaries. By default the strategy is <b>"fit"</b)</span></div><div class="detailBody"><div class="desc"> Specifies how Menu should adjust to screen boundaries. By default the strategy is <b>"fit"</b> for a sub menu with a horizontal parent,
meaning it will move to fit in screen boundaries in all directions, and <b>"fit flip"</b> for a sub menu with vertical parent, meaning it will fit vertically and flip over
its parent horizontally. You can also switch off the screen boundary detection completely if you set the <b>popupCollision</b> to false.</div><div class="code-sample"><h4 class="code-title">Example</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
    popupCollision: false
});</code></pre></div></div>

